'use client'

import React from 'react';
import Timeline from '@/app/organic-tea/components/Timeline';
import Marquee from 'react-fast-marquee';
import LazyImage from '@/components/LazyImage';
import MediaCarousel from '@/app/good-tea/components/MediaCarousel';
import VideoPlayer from '@/components/VideoPlayer';
import NewsList from '@/components/NewsList';

// 组件配置接口
export interface ComponentConfig {
    id: string;
    type: 'timeline' | 'marquee' | 'image' | 'carousel' | 'video' | 'iframe' | 'news-list';
    properties: any;
}

interface ComponentRendererProps {
    component: ComponentConfig;
    className?: string;
}

// 单个组件渲染器
export function ComponentRenderer({ component, className }: ComponentRendererProps) {
    const { type, properties } = component;

    switch (type) {
        case 'timeline':
            return <Timeline timelineData={properties.timelineData || []} />;

        case 'marquee':
            return (
                <Marquee
                    direction={properties.direction || "left"}
                    speed={properties.speed || 20}
                    gradient={false}
                    className="mb-4"
                >
                    {(properties.images || []).map((img: string, i: number) => (
                        <div key={i} className="mx-4">
                            <img
                                loading='lazy'
                                src={img}
                                alt={`Marquee image ${i + 1}`}
                                className={properties.className || "h-50 w-auto object-contain"}
                            />
                        </div>
                    ))}
                </Marquee>
            );

        case 'image':
            return (
                <LazyImage
                    src={properties.src || "/placeholder.jpg"}
                    alt={properties.alt || ""}
                    className={properties.className || 'w-full min-h-[600px]'}
                />
            );

        case 'carousel':
            return (
                <MediaCarousel
                    items={properties.items || []}
                    autoplayDelay={properties.autoplayDelay || 1000}
                    width={properties.width || "86%"}
                    autoplay={properties.autoplay !== false}
                />
            );

        case 'video':
            return (
                <VideoPlayer
                    src={properties.src || ""}
                    className={properties.className}
                    objectFit={properties.objectFit}
                    autoPlay={properties.autoPlay}
                />
            );

        case 'iframe':
            return (
                <iframe
                    src={properties.src || "https://www.example.com"}
                    className={properties.className || "w-full h-72 border rounded"}
                    allowFullScreen
                    title="嵌入网页"
                />
            );

        case 'news-list':
            return (
                <NewsList
                    items={properties.items}
                    imageWidth={properties.imageWidth || 400}
                    imageHeight={properties.imageHeight || 240}
                    itemsPerPage={properties.itemsPerPage || 3}
                />
            );


        default:
            return <div>未知的组件类型: {type}</div>;
    }
}

interface ComponentListRendererProps {
    components: ComponentConfig[];
    className?: string;
    itemClassName?: string;
}

// 组件列表渲染器
export function ComponentListRenderer({ components, className, itemClassName }: ComponentListRendererProps) {
    if (components.length === 0) {
        return null;
    }

    return (
        <div className="h-min-[800px]">
            {components.map((component) => (
                <ComponentRenderer component={component} />
            ))}
        </div>
    );
}
